<template>
  <view class="container">
    <view class="content" :style="{ paddingTop: navBarHeight + 'px' }">
      <view class="top-bg" style="background: url('/static/image/bg.png')">
        <view class="black-div"></view>
        <view class="swiper-box">
          <u-swiper :list="list"></u-swiper>
        </view>
        <view class="second-panel">
          <view class="second-sub-panel">
            <view class="item">
              <view class="img-box">
                <image src="/static/image/icon2.png" class="icon1"></image>
              </view>
              <view class="item-txt">公司简介</view>
            </view>
            <view class="item">
              <view class="img-box">
                <image src="/static/image/icon4.png" class="icon1"></image>
              </view>
              <view class="item-txt">新手必看</view>
            </view>
            <view class="item">
              <view class="img-box">
                <image src="/static/image/icon1.png" class="icon1"></image>
              </view>
              <view class="item-txt">邀请海报</view>
            </view>
            <view class="item">
              <view class="img-box">
                <image src="/static/image/icon3.png" class="icon1"></image>
              </view>
              <view class="item-txt">公告资讯</view>
            </view>
            <view class="item">
              <view class="img-box">
                <image
                  src="/static/image/icon5.png"
                  class="icon1"
                  @click="handleClickbtn"
                ></image>
              </view>
              <view class="item-txt">推客指南</view>
            </view>
          </view>
        </view>
      </view>
      <view class="live-panel">
        <view class="live-bg">
          <view
            class="live-top"
            style="background-image: url('/static/image/live_bg.png')"
          >
            <!-- <view class="left-title">
                <image
                  src="/static/image/live_title.png"
                  class="live-title"
                ></image>
              </view>
              <view class="right-txt"></view> -->
          </view>
          <view class="live-list2">
            <view class="live-item2">
              <view class="live-left">
                <view class="live-avatar">
                  <image
                    src="https://p0.itc.cn/q_70/images03/20210204/7c999dec5a82494989f9dcab0406c10a.png"
                    class="avatar-img"
                  ></image>
                </view>
                <view class="live-tag">直播中...</view>
              </view>
              <view class="live-right">
                <view class="live-time">10月26号 10:00开播</view>
                <view class="store-title">三只熊叔旗舰店</view>
                <view class="cashback-bg">
                  <view class="cashback-txt">最高返现</view>
                  <view class="cashback-txt red-txt">10%</view>
                </view>
                <view class="live-sub-title"
                  >松鼠空降 | 零食大降价 狂喜不断</view
                >
                <view class="promotion-bg">
                  <view class="avatar-list">
                    <view class="avatar-item first-item">
                      <image
                        src="https://img.chinaticket.com/admin/2020/01/10/44c4c5680a21f720.png"
                      ></image>
                    </view>
                    <view class="avatar-item second-item">
                      <image
                        src="https://p0.itc.cn/q_70/images03/20210204/7c999dec5a82494989f9dcab0406c10a.png"
                      ></image>
                    </view>
                    <view class="avatar-item">
                      <image
                        src="https://p0.itc.cn/q_70/images03/20210204/7c999dec5a82494989f9dcab0406c10a.png"
                      ></image>
                    </view>
                  </view>
                  <view class="promotion-txt">999+人已推广</view>
                </view>
              </view>
            </view>
            <view class="live-item2">
              <view class="live-left">
                <view class="live-avatar">
                  <image
                    src="https://p0.itc.cn/q_70/images03/20210204/7c999dec5a82494989f9dcab0406c10a.png"
                    class="avatar-img"
                  ></image>
                </view>
                <view class="live-tag">直播中...</view>
              </view>
              <view class="live-right">
                <view class="live-time">10月26号 10:00开播</view>
                <view class="store-title">三只熊叔旗舰店</view>
                <view class="cashback-bg">
                  <view class="cashback-txt">最高返现</view>
                  <view class="cashback-txt red-txt">10%</view>
                </view>
                <view class="live-sub-title"
                  >松鼠空降 | 零食大降价 狂喜不断</view
                >
                <view class="promotion-bg">
                  <view class="avatar-list">
                    <view class="avatar-item first-item">
                      <image
                        src="https://img.chinaticket.com/admin/2020/01/10/44c4c5680a21f720.png"
                      ></image>
                    </view>
                    <view class="avatar-item second-item">
                      <image
                        src="https://p0.itc.cn/q_70/images03/20210204/7c999dec5a82494989f9dcab0406c10a.png"
                      ></image>
                    </view>
                    <view class="avatar-item">
                      <image
                        src="https://p0.itc.cn/q_70/images03/20210204/7c999dec5a82494989f9dcab0406c10a.png"
                      ></image>
                    </view>
                  </view>
                  <view class="promotion-txt">999+人已推广</view>
                </view>
              </view>
            </view>
            <view class="live-item2">
              <view class="live-left">
                <view class="live-avatar">
                  <image
                    src="https://p0.itc.cn/q_70/images03/20210204/7c999dec5a82494989f9dcab0406c10a.png"
                    class="avatar-img"
                  ></image>
                </view>
                <view class="live-tag">直播中...</view>
              </view>
              <view class="live-right">
                <view class="live-time">10月26号 10:00开播</view>
                <view class="store-title">三只熊叔旗舰店</view>
                <view class="cashback-bg">
                  <view class="cashback-txt">最高返现</view>
                  <view class="cashback-txt red-txt">10%</view>
                </view>
                <view class="live-sub-title"
                  >松鼠空降 | 零食大降价 狂喜不断</view
                >
                <view class="promotion-bg">
                  <view class="avatar-list">
                    <view class="avatar-item first-item">
                      <image
                        src="https://img.chinaticket.com/admin/2020/01/10/44c4c5680a21f720.png"
                      ></image>
                    </view>
                    <view class="avatar-item second-item">
                      <image
                        src="https://p0.itc.cn/q_70/images03/20210204/7c999dec5a82494989f9dcab0406c10a.png"
                      ></image>
                    </view>
                    <view class="avatar-item">
                      <image
                        src="https://p0.itc.cn/q_70/images03/20210204/7c999dec5a82494989f9dcab0406c10a.png"
                      ></image>
                    </view>
                  </view>
                  <view class="promotion-txt">999+人已推广</view>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="popular-video-wrap">
      <view class="video-title">
        <view class="video-txt">
          <image
            src="/static/image/video_title.png"
            class="video-txt-img"
          ></image>
        </view>
        <view class="video-icon">
          <image src="/static/image/img13.png" class="arrow-img"></image>
        </view>
      </view>
      <view class="scrollable-container">
        <view class="scroll-item">
          <image src="/static/image/swiper_bg.png" class="swiper-bg"></image>
          <view class="swiper-txt">MAS氨基酸界面泡沫MAS氨基酸界面泡沫</view>
          <view class="sale-price">¥108.00</view>
          <view class="share-bg">
            <view class="share-txt">分享每单赚</view>
            <view class="share-price">¥58.00</view>
          </view>
        </view>
        <view class="scroll-item">
          <image src="/static/image/swiper_bg.png" class="swiper-bg"></image>
          <view class="swiper-txt">MAS氨基酸界面泡沫MAS氨基酸界面泡沫</view>
          <view class="sale-price">¥108.00</view>
          <view class="share-bg">
            <view class="share-txt">分享每单赚</view>
            <view class="share-price">¥58.00</view>
          </view>
        </view>
        <view class="scroll-item">
          <image src="/static/image/swiper_bg.png" class="swiper-bg"></image>
          <view class="swiper-txt">MAS氨基酸界面泡沫MAS氨基酸界面泡沫</view>
          <view class="sale-price">¥108.00</view>
          <view class="share-bg">
            <view class="share-txt">分享每单赚</view>
            <view class="share-price">¥58.00</view>
          </view>
        </view>
        <view class="scroll-item">
          <image src="/static/image/swiper_bg.png" class="swiper-bg"></image>
          <view class="swiper-txt">MAS氨基酸界面泡沫MAS氨基酸界面泡沫</view>
          <view class="sale-price">¥108.00</view>
          <view class="share-bg">
            <view class="share-txt">分享每单赚</view>
            <view class="share-price">¥58.00</view>
          </view>
        </view>
        <view class="scroll-item">
          <image src="/static/image/swiper_bg.png" class="swiper-bg"></image>
          <view class="swiper-txt">MAS氨基酸界面泡沫MAS氨基酸界面泡沫</view>
          <view class="sale-price">¥108.00</view>
          <view class="share-bg">
            <view class="share-txt">分享每单赚</view>
            <view class="share-price">¥58.00</view>
          </view>
        </view>
      </view>
    </view>
    <view class="popular-buy-wrap">
      <view class="video-title2">
        <view class="video-txt">
          <image
            src="/static/image/bug_title.png"
            class="video-txt-img"
          ></image>
        </view>
        <view class="video-icon">
          <image src="/static/image/img13.png" class="arrow-img"></image>
        </view>
      </view>
      <view class="buy-list">
        <view class="buy-item">
          <view class="buy-left">
            <image src="/static/image/shop_bg.png" class="shop-bg"></image>
          </view>
          <view class="buy-right">
            <view class="buy-title"
              >黛诗函 美白护肤黛诗函 美白护肤黛诗函 美白护肤黛诗函</view
            >
            <view class="earn-coupon-wrap">
              <view class="earn-bg">
                <view class="earn-txt">赚/返</view>
                <view class="earn-price">¥2.80</view>
              </view>
              <view class="coupon-bg">
                <view class="coupon-img">
                  <image src="/static/image/coupon_bg.png" class=""></image>
                </view>
                <view class="coupon-txt">满200.00减50.00</view>
              </view>
            </view>
            <view class="panic-buying-wrap">
              <view class="panic-left">
                <u-line-progress
                  :percentage="30"
                  activeColor="#ff0000"
                ></u-line-progress>
                <view class="panic-txt">疯抢中 已抢80.50%</view>
              </view>
              <view class="panic-right"> 去抢购 </view>
            </view>
          </view>
        </view>
        <view class="buy-item">
          <view class="buy-left">
            <image src="/static/image/shop_bg.png" class="shop-bg"></image>
          </view>
          <view class="buy-right">
            <view class="buy-title"
              >黛诗函 美白护肤黛诗函 美白护肤黛诗函 美白护肤黛诗函</view
            >
            <view class="earn-coupon-wrap">
              <view class="earn-bg">
                <view class="earn-txt">赚/返</view>
                <view class="earn-price">¥2.80</view>
              </view>
              <view class="coupon-bg">
                <view class="coupon-img">
                  <image src="/static/image/coupon_bg.png" class=""></image>
                </view>
                <view class="coupon-txt">满200.00减50.00</view>
              </view>
            </view>
            <view class="panic-buying-wrap">
              <view class="panic-left">
                <u-line-progress
                  :percentage="30"
                  activeColor="#ff0000"
                ></u-line-progress>
                <view class="panic-txt">疯抢中 已抢80.50%</view>
              </view>
              <view class="panic-right"> 去抢购 </view>
            </view>
          </view>
        </view>
        <view class="buy-item">
          <view class="buy-left">
            <image src="/static/image/shop_bg.png" class="shop-bg"></image>
          </view>
          <view class="buy-right">
            <view class="buy-title"
              >黛诗函 美白护肤黛诗函 美白护肤黛诗函 美白护肤黛诗函</view
            >
            <view class="earn-coupon-wrap">
              <view class="earn-bg">
                <view class="earn-txt">赚/返</view>
                <view class="earn-price">¥2.80</view>
              </view>
              <view class="coupon-bg">
                <view class="coupon-img">
                  <image src="/static/image/coupon_bg.png" class=""></image>
                </view>
                <view class="coupon-txt">满200.00减50.00</view>
              </view>
            </view>
            <view class="panic-buying-wrap">
              <view class="panic-left">
                <u-line-progress
                  :percentage="30"
                  activeColor="#ff0000"
                ></u-line-progress>
                <view class="panic-txt">疯抢中 已抢80.50%</view>
              </view>
              <view class="panic-right"> 去抢购 </view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="block-div"></view>
  </view>
</template>
<script>
export default {
  name: "index",
  mixins: [], // 使用mixin
  data() {
    return {
      navBarHeight: 0,
      list: [
        "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimage109.360doc.com%2FDownloadImg%2F2025%2F07%2F1015%2F299507871_4_20250710033043597.jpeg&refer=http%3A%2F%2Fimage109.360doc.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1764606671&t=dcaaef1bb53b78eae910bdc155906df9",
        "https://ww1.sinaimg.cn/mw690/458a9af8gy1hwxa47lqi8j20u01t4tfw.jpg",
        "https://gips2.baidu.com/it/u=2474776577,4152239465&fm=3074&app=3074&f=PNG?w=1440&h=2560",
      ],
    };
  },
  created() {
    const systemInfo = uni.getSystemInfoSync();
    const statusBarHeight = systemInfo.statusBarHeight; // 获取状态栏高度
    if (systemInfo.platform === "android") {
      // this.navBarHeight = statusBarHeight + 48; // Android 导航栏高度
    } else {
      // this.navBarHeight = statusBarHeight + 44; // iOS 导航栏高度
    }
  },
  methods: {
    handleClickbtn() {
      this.$utils.toPage("/pages/index/customer");
    },
  },
};
</script>
<style scoped>
.container {
  background: #f5f5f5;
  margin-bottom: 500rpx;
}
.top-bg {
  /* background: url("/static/image/bg.png")
    no-repeat; */
  /* background-size: 750rpx 400rpx; */
  width: 750rpx;
  height: 480rpx;
}
.black-div {
  height: 20rpx;
  width: 100%;
}

.swiper-box {
  margin: 0 20rpx;
}

.second-panel {
  margin-top: 20rpx;
}
.product-item {
  display: flex;
  border-bottom: 1rpx solid #eee;
  overflow: hidden;
  background-color: #fff;
  padding: 20rpx;
  margin: 0 20rpx;
}

.product-item image {
  width: 200rpx;
  height: 200rpx;
}

.second-panel {
  padding: 0 20rpx;
}
.second-sub-panel {
  width: 100%;
  height: 180rpx;
  background: #fff;
  border-radius: 16rpx;
  display: flex;
  align-items: center;
}
.item {
  flex: 1;
  text-align: center;
}
.icon1 {
  width: 66rpx;
  height: 64rpx;
}
.item-txt {
  margin-top: 12rpx;
  font-size: 30rpx;
  color: #333;
}

.live-panel {
  margin: 20rpx;
  width: 714rpx;
  height: 990rpx;
}

.live-bg {
  width: 714rpx;
  height: 990rpx;
}
.live-list2 {
  background-color: #ffe7e1;
  width: 100%;
  height: 880rpx;
  border-bottom-left-radius: 16rpx;
  border-bottom-right-radius: 16rpx;
}

.live-top {
  background-size: 100% 110rpx;
  width: 100%;
  height: 110rpx;
}
.live-title {
  width: 295rpx;
  height: 63rpx;
  margin-top: 16rpx;
  margin-left: 30rpx;
}

.right-txt {
  margin-top: 16rpx;
  margin-right: 30rpx;
  color: #fff;
}

.live-item2 {
  height: 272rpx;
  width: 676rpx;
  background: #fff;
  border-radius: 16rpx;
  margin: 0 20rpx 20rpx;
  display: flex;
  justify-content: space-between;
}

.live-left {
  width: 180rpx;
  position: relative;
}

.live-avatar {
  margin-top: 30px;
  margin-left: 26rpx;
  border: 2rpx solid #ffe7e1;
  border-radius: 100%;
}

.live-tag {
  width: 98rpx;
  height: 29rpx;
  background: #fa705b;
  border-radius: 20rpx;
  font-size: 20rpx;
  color: #fff;
  position: absolute;
  left: 50%;
  bottom: 25%;
  margin-left: -40rpx;
  text-align: center;
}

.avatar-img {
  width: 132rpx;
  height: 132rpx;
}

.live-right {
  width: 479rpx;
  position: relative;
}

.live-time {
  position: absolute;
  right: 0;
  top: 0;
  width: 220rpx;
  height: 48rpx;
  background: #f5894e;
  border-top-right-radius: 20rpx;
  border-bottom-left-radius: 20rpx;
  font-size: 24rpx;
  color: #fff;
  text-align: center;
  line-height: 48rpx;
}

.store-title {
  font-size: 32rpx;
  text-align: left;
  margin-top: 36rpx;
  font-weight: 600;
}

.cashback-bg {
  background: url("/static/image/img18.png");
  background-size: 132rpx 36rpx;
  width: 132rpx;
  height: 36rpx;
  line-height: 36rpx;
  display: flex;
  justify-content: space-around;
  margin-top: 20rpx;
}

.cashback-txt {
  font-size: 16rpx;
  color: #fff;
  font-weight: 600;
}

.red-txt {
  color: #d40000;
}

.live-sub-title {
  color: #999999;
  font-size: 24rpx;
  margin: 10rpx auto;
}

.promotion-bg {
  background: url("/static/image/promotion_bg.png");
  background-size: 470rpx 60rpx;
  width: 470rpx;
  height: 60rpx;
  display: flex;
  justify-content: start;
  align-items: center;
  margin-top: 20rpx;
}

.avatar-list {
  position: relative;
  margin-left: 10rpx;
}

.avatar-item {
  display: flex;
  display: inline-block;
  width: 38rpx;
  border: 2rpx solid #fff;
  border-radius: 100%;
}

.avatar-item image {
  width: 38rpx;
  height: 38rpx;
}

.first-item {
  position: relative;
  left: 25rpx;
}

.second-item {
  position: relative;
  left: 15rpx;
}

.promotion-txt {
  font-size: 28rpx;
  color: #b58c83;
}

.video-title {
  height: 108rpx;
  margin: 60rpx 20rpx 60rpx;
  line-height: 108rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.video-title2 {
  height: 108rpx;
  margin: 60rpx 0rpx;
  line-height: 108rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.video-txt-img {
  width: 295rpx;
  height: 63rpx;
}

.video-icon {
  width: 62rpx;
  height: 50rpx;
  line-height: 50rpx;
  text-align: center;
  background: #e4e2e2;
  border-radius: 40rpx;
  justify-content: space-around;
  position: relative;
}

.arrow-icon {
  color: #fe2742;
  position: absolute;
  left: 30%;
  top: 18%;
}

.swiper-list {
}

.scrollable-container {
  display: flex; /* 如果是水平滚动，可以使用flex布局 */
  overflow-x: auto; /* 允许水平滚动 */
  white-space: nowrap; /* 防止子元素换行 */
}

.scroll-item {
  /* flex: 1; */
  width: 300rpx;
  height: 680rpx;
  background: #fff;
  margin-right: 40rpx;
  border-radius: 20rpx;
}

.swiper-bg {
  width: 300rpx;
}

.swiper-txt {
  height: 70rpx;
  line-height: 70rpx;
  font-weight: 600;
  margin: 0 20rpx;
  font-size: 30rpx;
  width: 265rpx;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.sale-price {
  font-size: 36rpx;
  margin-left: 20rpx;
  color: #d40000;
  font-weight: 600;
  margin: 20rpx;
}

.share-bg {
  background: url("/static/image/img19.png");
  background-size: 262rpx 38rpx;
  width: 262rpx;
  height: 38rpx;
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin-left: 20rpx;
}

.share-txt {
  color: #d40000;
  font-size: 20rpx;
  font-weight: 600;
  margin-left: 34rpx;
}

.share-price {
  font-size: 20rpx;
  color: #fff;
}

.buy-item {
  background: #fff;
  border-radius: 20rpx;
  margin-bottom: 20rpx;
  display: flex;
  justify-content: start;
  padding: 20rpx;
}

.buy-left {
  width: 280rpx;
  text-align: center;
  margin-right: 20rpx;
}

.shop-bg {
  width: 240rpx;
  height: 240rpx;
}

.buy-title {
  color: #333;
  font-weight: 600;
}

.earn-bg {
  background: url("/static/image/img18.png");
  background-size: 148rpx 38rpx;
  width: 148rpx;
  height: 38rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 24rpx;
}

.earn-txt {
  margin-left: 10rpx;
  color: #fff;
}

.earn-price {
  margin-left: 0rpx;
  color: #d40000;
}

.earn-coupon-wrap {
  display: flex;
  justify-content: start;
  margin: 20rpx 0rpx;
}

.coupon-bg {
  width: 214rpx;
  height: 38rpx;
  background: #fffaee;
  margin-left: 20rpx;
  border-radius: 10rpx;
  line-height: 38rpx;
  display: flex;
  justify-content: space-around;
}

.coupon-img {
  margin-top: -4rpx;
}

.coupon-img image {
  width: 24rpx;
  height: 24rpx;
}

.coupon-txt {
  font-size: 24rpx;
  color: #a4762f;
}

.panic-buying-wrap {
  background: url("/static/image/img20.png");
  background-size: 416rpx 66rpx;
  width: 416rpx;
  height: 66rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 24rpx;
}

.panic-left {
  margin-left: 20rpx;
  margin-top: 8rpx;
}

.panic-right {
  color: #fff;
  font-size: 30rpx;
  margin-right: 24rpx;
}

.panic-txt {
  color: #ec2c2c;
}

.block-div {
  min-height: 200rpx;
}

.arrow-img {
  width: 36rpx;
  height: 36rpx;
}

.popular-buy-wrap {
  margin: 20rpx;
}

.popular-video-wrap {
  margin-left: 20rpx;
}
</style>